import Link from 'next/link'
import React from "react";
import Footer from './footer';
export default function MyHeader() {
    return (

            <nav className="fixed w-full bg-white shadow-sm z-50">
            <div className="max-w-7xl mx-auto px-4">
            <div className="flex justify-between items-center h-16">
                <div className="flex items-center">
                <a href="#" className="text-2xl font-['Pacifico'] text-primary">logo</a>
                <div className="ml-10 flex space-x-8">
                    <a href="/" className="text-primary font-medium">首页</a>
                     <Link href="/create" className="text-gray-500 hover:text-primary"> 
                    创建事件
                     </Link>
                    <Link href="/my" className="text-gray-500 hover:text-primary">我的预测</Link>
                    <Link href="/list" className="text-gray-500 hover:text-primary">排行榜</Link>
                </div>
                </div>
                <div className="flex items-center space-x-6">
                <div className="relative">
                    <input 
                    type="text" 
                    placeholder="搜索赛事" 
                    className="w-64 h-10 pl-10 pr-4 !rounded-button border border-gray-200 focus:outline-none focus:border-primary text-sm"
                    />
                    <i className="fas fa-search absolute left-3 top-3 text-gray-400"></i>
                </div>
                <button className="bg-primary text-white px-6 py-2 !rounded-button hover:bg-secondary whitespace-nowrap">
                    连接钱包
                </button>
                </div>
            </div>
            </div>
        </nav>
  
    );
}
